<%--
  Created by IntelliJ IDEA.
  User: 25498
  Date: 2021/11/26
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
    <link rel="stylesheet" href="../css/fontawesome-all.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.min.js"></script>
    <style>
        #form-body{
            width: 500px;
            height: 600px;
            border: 1px solid #999;
            margin: 100px auto;
            padding-top: 50px;
            background: rgba(10, 10, 10, 0.17);
            border-bottom: 8px solid #f7296f;
            border-radius: 30px 30px 50px 50px;
        }
        .color-white{
            color: white;
        }
    </style>
</head>
<body>
<%--    背景dom--%>
    <div id="bg">
    <canvas></canvas>
    <canvas></canvas>
    <canvas></canvas>
    </div>
<%--    注册框内容--%>
    <div id="form-body">
        <form class="form-horizontal" id="form" role="form" action="../registers" method="post">
            <input type="hidden" name="hidden" id="fail" value=<%=session.getAttribute("fail")%>>
            <% session.removeAttribute("fail");%>
            <div class="form-group">
                <label for="firstname" class="col-sm-4 control-label color-white">用户名</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="firstname" name="u_name" placeholder="请输入用户名" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-4 control-label color-white">密码</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="lastname" name="u_password" placeholder="请输入密码" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-4 control-label color-white">确认密码</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="passwords"  placeholder="请确认密码" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-4 control-label color-white">Email</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="Email"  placeholder="请输入Email" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-4 control-label color-white">姓名</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="real_name"  placeholder="请输入真实姓名" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-4 control-label color-white">手机号</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" name="tel"  placeholder="请输入手机号" autocomplete="off" required>
                </div>
            </div>
            <div class="form-group color-white">
                <label for="lastname" class="col-sm-4 control-label">性别</label>
                <label class="radio-inline" style="margin-left: 15px">
                    <input type="radio" name="sex" value="男" checked> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" value="女"> 女
                </label>
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-4 control-label color-white">出生日期</label>
                <div class="col-sm-6">
                    <input type="date" class="form-control" name="date_birth"  placeholder="请输入日期">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-4 col-sm-10 form-inline">
                    <button type="submit" class="btn btn-default">注册</button>
                    <a href="../login.jsp">已有账号，返回登录</a>
                </div>
            </div>
        </form>
    </div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/canva_moving_effect.js"></script>
</body>
<script>
    let msg = document.getElementById("fail").value;
    if(msg == "false"){
        alert("注册失败！用户名已存在");
    }
    let formItem = document.getElementById("form");
    // 提交判断密码框密码是否一致
    formItem.onsubmit = () => {
        let password1 = document.getElementById("lastname").value;
        let password2 = document.getElementById("passwords").value;
        console.log(password1);
        console.log(password2);
        if (password1 === password2) {
            return true;
        } else {
            alert("两次输入的密码不一致！");
            return false;
        }
    }
</script>
</html>
